<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户编号：">
        <el-input v-model="ruleForm.id" disabled class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="ruleForm.realName" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input v-model.number="ruleForm.phone" class="selWidth"></el-input>
      </el-form-item>
    <el-form-item label="密码：" prop="pwd">
      <el-input v-model="ruleForm.pwd" class="selWidth"></el-input>
    </el-form-item>
<!--      <el-form-item label="生日：">-->
<!--        <el-date-picker-->
<!--          v-model="ruleForm.birthday"-->
<!--          type="date"-->
<!--          class="selWidth"-->
<!--          placeholder="选择日期"-->
<!--          format="yyyy 年 MM 月 dd 日"-->
<!--          value-format="yyyy-MM-dd">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="身份证号：">-->
<!--        <el-input v-model="ruleForm.cardId" class="selWidth"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="用户地址：">
        <el-input @change="mapSearch" id ="mapAddress" placeholder="请输入地址按回车检索位置" v-model="ruleForm.addres" class="selWidth"></el-input>
        <el-input type="hidden" style="display: none" id ="mapAddressLat" v-model="ruleForm.lat"></el-input>
        <el-input type="hidden" style="display: none" id ="mapAddressLng" v-model="ruleForm.lng"></el-input>
        <div id="map"></div>
        <div id="panel"></div>
      </el-form-item>
      <el-form-item label="用户备注：">
        <el-input v-model="ruleForm.mark" type="textarea" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="用户等级：">
        <el-select v-model="ruleForm.level" placeholder="请选择"  class="selWidth" clearable filterable>
          <el-option :value="item.id" v-for="(item, index) in levelList" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户分组：">
        <el-select v-model="ruleForm.groupId" placeholder="请选择"  class="selWidth" clearable filterable>
          <el-option :value="item.id" v-for="(item, index) in groupList" :key="index" :label="item.groupName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户标签：">
        <el-select v-model="labelData" placeholder="请选择"  class="selWidth" clearable filterable multiple >
          <el-option :value="item.id" v-for="(item, index) in labelLists" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推广员">
        <el-radio-group v-model="ruleForm.isPromoter">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
  import { groupListApi, levelListApi, tagListApi, userInfoApi, userUpdateApi,userSaveApi } from '@/api/user'
  const defaultObj = {
    birthday: '',
    cardId: '',
    id : null,
    mark: '',
    phone: '',
    realName: '',
    addres:'',
    groupId: '',
    level: '',
    isPromoter: false,
    status: false,
  }
  export default {
    name: "UserEdit",
    props:{
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        ruleForm: Object.assign({}, defaultObj),
        groupData: [],
        labelData: [],
        labelLists: [],
        levelList: [],
        groupList: [],
        rules: {},
        map:null
      }
    },
    mounted() {
      let that = this;
      that.map = new AMap.Map("map", {
        center: [106.56288, 29.556742], // [107.755852, 29.590834],
        resizeEnable:true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 10.5, //8.35,
        showBuildingBlock:true,
        showLabel:true,
      });

      if(this.uid > 0){
        this.userInfo()
      }
      this.groupLists()
      this.levelLists()
      this.getTagList()
    },
    methods: {
      // 详情
      mapSearch (address) {
        let that = this;
        AMap.plugin(["AMap.PlaceSearch"], function() {
          //构造地点查询类
          var placeSearch = new AMap.PlaceSearch({
            pageSize: 3, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "023", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: that.map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          //关键字查询
          placeSearch.search(address)
          // placeSearch.on('selectChanged',function (e) {
          //     document.querySelector('#mapAddress').value = e.selected.data.address
          // })
          //变更地址和经纬度
          placeSearch.on('listElementClick',function (e) {
            that.ruleForm.addres = e.data.address
            that.ruleForm.lat = e.data.location.lat
            that.ruleForm.lng = e.data.location.lng
          })
          placeSearch.on('markerClick',function (e) {
            that.ruleForm.addres = e.data.address
            that.ruleForm.lat = e.data.location.lat
            that.ruleForm.lng = e.data.location.lng
          })

        });
      },
      // 详情
      userInfo () {
        userInfoApi({ id: this.uid}).then(async res => {
          this.ruleForm = {
            birthday: res.birthday,
            cardId: res.cardId,
            id : res.uid,
            mark: res.mark,
            phone: res.phone,
            realName: res.realName,
            status: res.status,
            addres: res.addres,
            groupId: Number(res.groupId) || '',
            level: res.level || '',
            isPromoter: res.isPromoter,
            tagId: res.tagId || ''
          }
          this.labelData = res.tagId ? res.tagId.split(',').map(Number): []
        })
      },
      // 分组列表
      groupLists () {
        groupListApi({ page: 1, limit: 9999}).then(async res => {
          this.groupList = res.list
        })
      },
      //标签列表
      getTagList () {
        tagListApi({ page: 1, limit: 9999}).then(res => {
          this.labelLists = res.list
        })
      },
      // 等级列表
      levelLists () {
        levelListApi({ page: 1, limit: 9999, isShow: 1, isDel: 0}).then(async res => {
          this.levelList = res.list
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.uid > 0){
              this.ruleForm.tagId=this.labelData.join(',')
              userUpdateApi({id: this.ruleForm.id},this.ruleForm).then(async res => {
                this.$message.success('编辑成功')
                this.$parent.$parent.visible = false
                this.$parent.$parent.getList()
              })
            }else{
              this.ruleForm.tagId=this.labelData.join(',')
              userSaveApi(this.ruleForm).then(async res => {
                console.log(res)
                this.$message.success('编辑成功')
                this.$parent.$parent.visible = false
                this.$parent.$parent.getList()
              })
            }

          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetForm');
      }
    }
  }
</script>

<style scoped>
 .selWidth{
   width: 90%;
 }
  #map{
    width: 90%;
    height: 300px;
  }
  #panel{
    width:30%;
    position: absolute;
    top: 35px;
    opacity: 0.9;
  }
</style>
